Paint with All The Colors of the Screen

In this recipe we find out how many colors the display will generate.

Discussion

In the Available Screen Real Estate recipe you learned how to find out just how much screen room you have to display text and graphics on a web page. The other important factor in determining how well your page will display is the number of colors available with the user's graphics adapter and monitor combination.

While you will have gone to a lot of trouble to create full-color JPEG graphics for your page, the odds are that a lot of your potential "customers" are still viewing the Web in just 256 colors. This means that the browser can't reproduce your full-color graphics in all their glory, and will be reduced to dithering them.

Since dithered graphics lose detail, you might want to have a second set of graphics in a lower color resolution which you can substitute via JavaScript once you've determined the number of available colors. This takes up more space on the server, but it's better than letting the browser dither your graphics "on-the-fly." If you're using a good quality paint or drawing program, its dithering capabilities will be superior what's available in any given browser, and will make for better graphics at the user's end. The better the graphics look, the better you look!

Here's a little script fragment example to give you an idea of how to substitute graphics based on color resolution.

function PictureOfMyDog()
//
// One of your authors has a dog named "Honey"
//
{
	document.write('<IMG SRC="');
	if(screen.pixelDepth == 4)	// 16 colors!
		document.write('LOWRESHONEY.GIF');
	else
		if(screen.pixelDepth == 8) // 256 colors
			document.write('HONEYIN256.GIF');
		else // 65,536 or 16,777,216 colors
			document.write('FULLCOLORHONEY.JPG');
	document.writeln('" HEIGHT=64 WIDTH=96>');
}

Copyright ©2000 by Charles River Media, All Rights Reserved